<template>
  <div class="bg-white overflow-hidden shadow rounded-lg">
    <div class="px-4 py-5 sm:p-6">
      <div class="text-center">
        <h1 class="text-3xl font-bold text-gray-900 mb-4">
          欢迎使用前后端分离项目
        </h1>
        <p class="text-lg text-gray-600 mb-8">
          这是一个基于 Vue.js 3 + Node.js/Express + MongoDB 的全栈 Web 应用模板
        </p>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
          <div class="bg-blue-50 p-6 rounded-lg">
            <div class="text-blue-600 mb-3">
              <svg class="w-8 h-8 mx-auto" fill="currentColor" viewBox="0 0 20 20">
                <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
              </svg>
            </div>
            <h3 class="text-lg font-medium text-gray-900 mb-2">Vue.js 3</h3>
            <p class="text-gray-600">现代前端框架，使用 Composition API</p>
          </div>
          
          <div class="bg-green-50 p-6 rounded-lg">
            <div class="text-green-600 mb-3">
              <svg class="w-8 h-8 mx-auto" fill="currentColor" viewBox="0 0 20 20">
                <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"/>
              </svg>
            </div>
            <h3 class="text-lg font-medium text-gray-900 mb-2">Express.js</h3>
            <p class="text-gray-600">快速、灵活的 Node.js Web 框架</p>
          </div>
          
          <div class="bg-purple-50 p-6 rounded-lg">
            <div class="text-purple-600 mb-3">
              <svg class="w-8 h-8 mx-auto" fill="currentColor" viewBox="0 0 20 20">
                <path d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z"/>
              </svg>
            </div>
            <h3 class="text-lg font-medium text-gray-900 mb-2">MongoDB</h3>
            <p class="text-gray-600">NoSQL 文档数据库</p>
          </div>
        </div>
        
        <div class="space-y-4">
          <p class="text-gray-600">
            项目已配置完整的开发环境和基础功能，包括：
          </p>
          <ul class="text-left max-w-md mx-auto space-y-2 text-gray-600">
            <li class="flex items-center">
              <span class="text-green-500 mr-2">✓</span>
              Vue Router 路由管理
            </li>
            <li class="flex items-center">
              <span class="text-green-500 mr-2">✓</span>
              Pinia 状态管理
            </li>
            <li class="flex items-center">
              <span class="text-green-500 mr-2">✓</span>
              TailwindCSS 样式框架
            </li>
            <li class="flex items-center">
              <span class="text-green-500 mr-2">✓</span>
              Axios HTTP 客户端
            </li>
            <li class="flex items-center">
              <span class="text-green-500 mr-2">✓</span>
              RESTful API 接口
            </li>
          </ul>
          
          <div class="pt-4">
            <router-link
              to="/users"
              class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
            >
              查看用户管理示例
              <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"/>
              </svg>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>
